<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8">
		<title>jQuery datePicker renderCalendarBankHolidays demo</title>
		
		<!-- firebug lite -->
		<script type="text/javascript" src="firebug/firebug.js"></script>

        <!-- jQuery -->
		<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
        
        <!-- required plugins -->
		<script type="text/javascript" src="scripts/date.js"></script>
		<!--[if IE]><script type="text/javascript" src="scripts/jquery.bgiframe.min.js"></script><![endif]-->
        
        <!-- jquery.datePicker.js -->
		<script type="text/javascript" src="scripts/jquery.datePicker.js"></script>
        
        <!-- datePicker required styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/datePicker.css">
		
        <!-- page specific styles -->
		<link rel="stylesheet" type="text/css" media="screen" href="styles/demo.css">
		<style type="text/css" media="screen">
		table.jCalendar td.bank-holiday {
			border: 1px solid #f00;
		}
		</style>
        
        <!-- page specific scripts -->
		<script type="text/javascript" charset="utf-8">
            $(function()
            {
				$('#dow').bind(
					'change',
					function()
					{
						Date.firstDayOfWeek = Number(this.options[this.selectedIndex].value);
					}
				);
				var bankHolidays = {};
				bankHolidays['d' + ((new Date(2007, 0, 1)).getTime())] = 'New Year\'s day';
				bankHolidays['d' + ((new Date(2007, 3, 6)).getTime())] = 'Good friday';
				bankHolidays['d' + ((new Date(2007, 3, 9)).getTime())] = 'Easter Monday';
				bankHolidays['d' + ((new Date(2007, 4, 7)).getTime())] = 'Early May Bank Holiday';
				bankHolidays['d' + ((new Date(2007, 4, 28)).getTime())] = 'Spring Bnk Holiday';
				bankHolidays['d' + ((new Date(2007, 7, 27)).getTime())] = 'Summer Bank Holiday';
				bankHolidays['d' + ((new Date(2007, 11, 25)).getTime())] = 'Christmas Day';
				bankHolidays['d' + ((new Date(2007, 11, 26)).getTime())] = 'Boxing Day';
				
				var markBankHolidays = function($td, thisDate, month, year)
				{
					if (bankHolidays['d' + thisDate.getTime()]) {
						var bankHolidayName = bankHolidays['d' + thisDate.getTime()];
						$td.bind(
							'click',
							function()
							{
								alert('You clicked on ' + bankHolidayName);
							}
						).addClass('bank-holiday')
						.html(bankHolidayName + '(' + thisDate.getDate() + ')');
					}
				}
                $('#chooseDateForm').bind(
                    'submit',
                    function()
                    {
                        var month = this.month.options[this.month.selectedIndex].value;
                        var year = this.year.options[this.year.selectedIndex].value;
                        
                        $('#calendar-me').renderCalendar({month:month, year:year, renderCallback:markBankHolidays, showHeader:$.dpConst.SHOW_HEADER_LONG});
                        
                        return false;
                    }
                );
            });
		</script>
		
	</head>
	<body>
        <div id="container">
            <h1>jquery.datePicker example: renderCalendarCallback</h1>
			<p><a href="index.html">&lt; date picker home</a></p>
            <p>
                The following example demonstrates the use of $().renderCalendar as introduced by jquery.datePicker.js
                - we supply a <strong>renderCallback</strong> parameter so that we have control over how each day is
				rendered.
            </p>
			<p>
				In this case I add a class of "bank-holiday" to all UK bank holidays [<a href="http://www.dti.gov.uk/employment/bank-public-holidays/">1</a>]
				in 2007, make them give an alert when clicked as well as showing the name of the bank holiday in the table.
			</p>
            <div id="calendar-me">
                The contents of this div will be replaced with a call to $('#calendar-me').renderCalendar().
            </div>
            <form name="chooseDateForm" id="chooseDateForm" action="#">
                <fieldset>
                    <legend>Choose a month to render</legend>
                    <ol>
                        <li>
                            <label for="dow">First day of week:</label>
                            <select name="dow" id="dow">
                                <option value="1">Monday</option>
                                <option value="2">Tuesday</option>
                                <option value="3">Wednesday</option>
                                <option value="4">Thursday</option>
                                <option value="5">Friday</option>
                                <option value="6">Saturday</option>
                                <option value="0">Sunday</option>
                            </select>
                        </li>
                        <li>
                            <label for="month">Month:</label>
                            <select name="month" id="month">
                                <option value="0">January</option>
                                <option value="1">Febuary</option>
                                <option value="2">March</option>
                                <option value="3">April</option>
                                <option value="4">May</option>
                                <option value="5">June</option>
                                <option value="6">July</option>
                                <option value="7">August</option>
                                <option value="8">September</option>
                                <option value="9">October</option>
                                <option value="10">November</option>
                                <option value="11">December</option>
                            </select>
                        </li>
                        <li>
                            <label for="year">Year:</label>
                            <select name="year" id="year">
                                <option value="2007" selected="selected">2007</option>
                            </select>
                        </li>
                        <li>
                            <input type="submit" value="renderCalendar" />
                        </li>
                    </ol>
                </fieldset>
            </form>
			<h2>Page sourcecode</h2>
			<pre class="sourcecode">
$(function()
{
	$('#dow').bind(
		'change',
		function()
		{
			Date.firstDayOfWeek = Number(this.options[this.selectedIndex].value);
		}
	);
	var bankHolidays = {};
	bankHolidays['d' + ((new Date(2007, 0, 1)).getTime())] = 'New Year\'s day';
	bankHolidays['d' + ((new Date(2007, 3, 6)).getTime())] = 'Good friday';
	bankHolidays['d' + ((new Date(2007, 3, 9)).getTime())] = 'Easter Monday';
	bankHolidays['d' + ((new Date(2007, 4, 7)).getTime())] = 'Early May Bank Holiday';
	bankHolidays['d' + ((new Date(2007, 4, 28)).getTime())] = 'Spring Bnk Holiday';
	bankHolidays['d' + ((new Date(2007, 7, 27)).getTime())] = 'Summer Bank Holiday';
	bankHolidays['d' + ((new Date(2007, 11, 25)).getTime())] = 'Christmas Day';
	bankHolidays['d' + ((new Date(2007, 11, 26)).getTime())] = 'Boxing Day';
	
	var markBankHolidays = function($td, thisDate, month, year)
	{
		if (bankHolidays['d' + thisDate.getTime()]) {
			var bankHolidayName = bankHolidays['d' + thisDate.getTime()];
			$td.bind(
				'click',
				function()
				{
					alert('You clicked on ' + bankHolidayName);
				}
			).addClass('bank-holiday')
			.html(bankHolidayName + '(' + thisDate.getDate() + ')');
		}
	}
	$('#chooseDateForm').bind(
		'submit',
		function()
		{
			var month = this.month.options[this.month.selectedIndex].value;
			var year = this.year.options[this.year.selectedIndex].value;
			
			$('#calendar-me').renderCalendar({month:month, year:year, renderCallback:markBankHolidays, showHeader:$.dpConst.SHOW_HEADER_LONG});
			
			return false;
		}
	);
});</pre>
        </div>
	</body>
</html>